<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-04 09:45:24
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-04-21 09:25:44
 * @FilePath: \backstage - 副本\src\components\public\el-pagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="block" :style="{ 'width': treelength ? 'calc(100vw - 430px)' : 'calc(100vw - 241px)' }">
        <div class="paginationInfo">
            检索到
            {{ total }} 条记录 | 显示第 <span v-if="currentPage == 1">{{ currentPage }}</span><span v-else>{{ 20 *
                (currentPage - 1)
            }}</span>
            -
            <span v-if="info.pages == info.lastPage">{{ info.total }}</span>
            <span v-else>{{ 20 * currentPage }}</span>
            条记录
            <!-- {{ 20 * currentPage }} 条记录 -->
        </div>
    <el-pagination :background="background" :page-sizes="pageSizes" :current-page.sync="currentPage"
        :page-size.sync="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :layout="layout" :total="total">
        </el-pagination>



    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="getList.page" :page-size="getList.pageSize" layout="prev, pager, next, jumper"
            :total="queryCriteriaData.total">
        </el-pagination> -->

    <!-- <div class="paginationInfo">
            显示第 {{ getList.page }} -
                                                                                    {{ 20 * getList.page }} 条记录 | 检索到
                                                                                    {{ queryCriteriaData.total }} 条记录
                                                                                  </div>
                                                                                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                                                    :current-page="getList.page" :page-size="getList.pageSize" layout="prev, pager, next, jumper"
                                                                                    :total="queryCriteriaData.total">

                                                                                  </el-pagination> -->
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        background: {
            type: Boolean,
            default: true
        },
        treelength: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 20, 30, 50]
            }
        },
        layout: {
            type: String,
            default: 'prev, pager, next'
        },
        total: {
            required: true,
            type: Number,
            default: 0
        },
        pageNum: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        }
    },
    computed: {
        currentPage: {
            get() {
                return this.pageNum
            },
            set(val) {
                this.$emit('update:pageNum', val)
            }
        },
        pageSize: {
            get() {
                return this.limit
            },
            set(val) {
                this.$emit('update:limit', val)
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.currentPage = 1;
            this.$emit('pagination', { pageNum: this.currentPage, limit: val })
        },
        handleCurrentChange(val) {
            this.$emit('pagination', { pageNum: val, limit: this.pageSize })
        }
    }
}
</script>
  
<style scoped>
.page-content {
    text-align: right;
    margin: 10px 10px 0 0;
}
</style>
  